<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
            // // 1. 变量作用域
            // {
            //     var name = 'why';
            //     console.log(name);
            // }
            // console.log(name);
            // // 2. 没有块级作用域引起的问题： if 的块级
            // var func;
            // if (true) {
            //     var name = 'why';
            //     func = function () {
            //         console.log(name);
            //     }
            // }
            // name = 'koba';
            // func()
            // 3. 没有块级作用域引起的问题： for 的块级
            // var btns = document.getElementsByTagName('button');
            // for (var i = 0; i<btns.length; i++) {
            //     btns[i].addEventListener('click', function() {
            //         console.log("第" + (i+1) + '个按钮被点击');
            //     }) 
            // }

            const btns = document.getElementsByTagName('button');
            for (let i = 0; i<btns.length; i++) {
                btns[i].addEventListener('click', function() {
                    console.log("第" + (i+1) + '个按钮被点击');
                }) 
            }
        </script>
    </body>
</html>